CSS 2D transformacije

Što je transform?

CSS svojstvo transform primjenjuje 2D transformaciju na element. Možemo koristiti više funkcija odjednom, samo ih odvajamo razmakom. Važno je znati da transformacije ne remete okolne elemente (ne pomiču ih iz njihovog prirodnog toka).

transform: rotate(45deg) scale(1.2);

translate()

Pomiče element po osi X i Y.

CSS

rotate()

Rotira element za zadani kut.

CSS

scale()

Mijenja veličinu elementa.

CSS

skew()

Nagiba (iskrivljuje) element.

CSS

matrix()

Sve transformacije u jednoj funkciji.

CSS

kombinacija

Više transformacija odjednom.

CSS

transform-origin

Određuje točku (ishodište) iz koje kreće transformacija.

CSS